<template>
	<view>
		<view class="bg-orange" :style="{height:StatusBar+'px'}"></view>
		<view class="contents position-rel">
			<view class="circle-orange"></view>
			<view class="white flex align-end position-rel z-i-1">
				<view class="fontBold f-24">
					我 的
				</view>
				<view class=" eng">
					/MINE
				</view>
			</view>
			<view class="m-t-20 wrap position-rel z-i-1 flex flex-direction align-center">
				<view class="flex align-center" @click="toLogon">
					<image :src="info.photo?info.photo:'/static/img/headimg.png'" class="headimg" mode=""></image>
				</view>
				<view class="f-22 orange fontBold m-t-15" @click="toLogon">
					{{is_log?(info.name?info.name:'暂无昵称'):'点击登录注册'}}
				</view>
				<view class="fontBold f-16 m-t-5" @click="toLogon">
					{{is_log?(info.username?info.username:''):'请登录注册'}}
				</view>
			</view>
			<view class="position-rel z-i-1 m-t-10">
				<view class="flex align-center justify-space-between m-t-15 p-t-5 p-b-5" @click="clickIcon(1)">
					<view class="flex align-center">
						<image src="/static/img/mine-icon1.png" class="mine-icon" mode=""></image>
						<view class="f-16 fontBold">
							车牌号
						</view>
					</view>
					<view class="flex align-center">
						<view class="fontBold f-16 m-r-5" :class="[num?'orange':'black-9']">
							{{num?num:'请输入'}}
						</view>
						<image src="/static/img/right.png" class="right" mode=""></image>
					</view>
				</view>
				<view class="flex align-center justify-space-between p-t-5 p-b-5" @click="clickIcon(2)">
					<view class="flex align-center">
						<image src="/static/img/mine-icon2.png" class="mine-icon" mode=""></image>
						<view class="f-16 fontBold">
							发票管理
						</view>
					</view>
					<view class="flex align-center">
						<image src="/static/img/right.png" class="right" mode=""></image>
					</view>
				</view>
				<view class="flex align-center justify-space-between p-t-5 p-b-5" @click="clickIcon(3)">
					<view class="flex align-center">
						<image src="/static/img/mine-icon3.png" class="mine-icon" mode=""></image>
						<view class="f-16 fontBold">
							抵用券
						</view>
					</view>
					<view class="flex align-center">
						<image src="/static/img/right.png" class="right" mode=""></image>
					</view>
				</view>
				<view class="flex align-center justify-space-between p-t-5 p-b-5" @click="clickIcon(4)">
					<view class="flex align-center">
						<image src="/static/img/mine-icon2.png" class="mine-icon" mode=""></image>
						<view class="f-16 fontBold">
							点餐记录
						</view>
					</view>
					<view class="flex align-center">
						<image src="/static/img/right.png" class="right" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:'',
				info:{},
				is_log:false,//是否登录
			}
		},
		onLoad(option) {
			
		},
		onShow() {
			this.getInfo();
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.getInfo();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			clickIcon(type){
				switch (type){
					case 1:
					uni.navigateTo({
						url:'/pages/mine/carList'
					})
					break;
					case 2:
					uni.navigateTo({
						url:'/pages/mine/invoiceList'
					})
					break;
					case 3:
					uni.navigateTo({
						url:'/pages/mine/voucher'
					})
					break;
					case 4:
					uni.navigateTo({
						url:'/pages/mine/dineList'
					})
					break;
				}
			},
			getInfo(){
				let data = {
					
				}
				this.$http('/apicloud/User/userInfo',data).then(res=>{
					if(res.code == 200){
						let datas = res.data;
						this.num = datas.car_number;
						this.info = datas;
						this.is_log = true;
					}
				})
			},
			toLogon(){
				if(this.is_log){
					uni.navigateTo({
						url:'/pages/mine/myInfo'
					})
				}else{
					uni.setStorageSync('token','');
					uni.reLaunch({
						url:'/pages/logon/logon'
					})
				}
			},
		}
	}
</script>

<style lang="less">
	.circle-orange {
		width: 650px;
		height: 620px;
		background: #FF5200;
		border-radius: 50%;
		position: absolute;
		top: -400px;
		left: 50%;
		transform: translateX(-50%);
	}
	.wrap{
		background: #FFFFFF;
		box-shadow: 0px 0px 16px rgba(0,0,0,0.05);
		border-radius: 16rpx;
		padding:30rpx;
		.headimg{
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}
	}
	.mine-icon{
		width: 52rpx;
		height: 52rpx;
		margin-right: 20rpx;
	}
	.right{
		width: 28rpx;
		height: 28rpx;
	}
</style>
